Loading...
Skip to main content

Dynamic Imports

Dynamic Imports: Extending the #import Abstraction​

Dynamic imports take the data-sharing capabilities of the #import directive a step further by enabling you to load external libraries or modules dynamically at runtime. This feature allows you to easily extend the functionality of your project without needing to manually bundle external libraries or modules ahead of time. By leveraging dynamic imports, you can bring in external assets, utilities, or frameworks directly from the web, adding powerful features with minimal setup.

What are Dynamic Imports?​

Dynamic imports are an extension of the regular #import functionality that lets you load external resources (such as JavaScript libraries) into your script. You can import and use modules just like local variables or functions, and the system will handle the downloading and linking of the library at runtime. This allows for easy integration of external resources into your project, all while maintaining the simplicity of the import syntax.

How to Use Dynamic Imports​

To dynamically import a library, you use the following syntax:

#pragma import(moduleName = "URL")
  • moduleName: This symbol name that you'll use to refer to the module once it's loaded.
  • URL: The URL to the external resource (e.g., a CDN link to a JavaScript library). Once the module is imported, you can use it in your script as if it were a local variable or function, and it will behave just like any other imported item.

Example: Importing and Using Moment.js​

Let's say you want to use Moment.js to handle date and time formatting in your project. With dynamic imports, you can easily load the library from a CDN and use its functionality.

First, use the #import directive to load Moment.js from a CDN:

#pragma import(moment = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js")

Once the library is imported, you can use it just like any other variable or function. For example, you can display the current date and time, or format dates in a human-readable format.

function showCurrentDateTime() {
   const currentDateTime = moment().format('MMMM Do YYYY, h:mm:ss a');
    console.log("Current Date and Time: " + currentDateTime);
}

Benefits of Dynamic Imports​

  1. Load External Libraries at Runtime: You no longer need to bundle all external libraries ahead of time. Simply load them when they’re needed, reducing initial load times and keeping the project size small.

  2. Use External Resources: Import any library or resource hosted on the web (e.g., JavaScript libraries from CDNs like PixiJS, Lodash, Moment.js, etc.) and use them directly in your scripts.

  3. Dynamic Functionality: This allows you to add functionality on-the-fly. For example, you might load a graphics library only if the user needs advanced rendering features, or load an analytics library only if a certain condition is met during runtime.

  4. Simplified Integration: The #import syntax keeps everything simple, just like with local variables and functions. No need to worry about manually setting up the environment for external libraries.

  5. Better Resource Management: Dynamically importing libraries only when necessary helps manage your project’s performance and resource usage more efficiently. You avoid loading unnecessary libraries and ensure they’re only included when actually used.


⚠️ Important Notes:

  • Asynchronous Loading: Dynamic imports are handled asynchronously, so the script execution will wait for the module to finish loading before trying to use it. This is automatically managed by the runtime, but keep in mind that you may want to design your code to account for the fact that the module might take some time to load, especially if it's large.
  • Error Handling: If the URL provided for the external resource is incorrect or unreachable, the system may throw an error, and the module will not be available for use.